<template>
  <div class="subjectDoc">
    <div class="topbar">
      <p>编号</p>
      <el-input
        v-model="no"
        key="wd1"
        ref="backInp"
        @keyup.enter.native="
          () => {
            $refs.backInp2.focus()
          }
        "
      ></el-input>
      <p>科目</p>
      <el-input
        ref="backInp2"
        v-model="name"
        key="wd2"
        @keyup.enter.native="saveSubject"
      ></el-input>
    </div>

    <div class="operation">
      <el-button
        type="primary"
        icon="el-icon-folder-checked"
        @click="saveSubject"
        >保存</el-button
      >
      <el-button icon="el-icon-delete" @click="clickDel">删除</el-button>
    </div>

    <el-table
      :data="subject"
      style="width: 100%"
      highlight-current-row
      height="75vh"
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
      @row-click="rowClick"
    >
      <el-table-column prop="no" label="编号" width="180"> </el-table-column>
      <el-table-column prop="name" label="科目"> </el-table-column>
    </el-table>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import {
  getSubject,
  addSubject,
  updateSubject,
  delSubject
} from '../../../network/subject'
import footView from '../../../components/FootView'

export default {
  name: 'subject_doc',
  created() {
    this._getSubject()
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
  },
  data() {
    return {
      id: '',
      no: '',
      name: '',
      subject: [],
      jxQuarter: null
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  watch: {
    no(a, b) {
      this.no = a.toUpperCase().trim()
    },
    name(a, b) {
      this.name = a.toUpperCase().trim()
    }
  },
  components: {
    footView
  },
  methods: {
    rowClick(e) {
      this.id = e.id
      this.no = e.no
      this.name = e.name
    },
    saveSubject() {
      this.$refs.backInp2.blur()
      if (this.no == '' || this.name == '') {
        this.$message({
          message: '编号或科目不能为空',
          type: 'error'
        })
        return
      }
      let params = {
        no: this.no,
        name: this.name
      }
      // console.log(params)
      for (const item of this.subject) {
        if (this.no == item.no) {
          this.$confirm('是否修改此编号的数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            params.id = item.id
            updateSubject(params).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                this._getSubject()
                this.$refs.backInp.focus()
              }
            })
          })
          return
        }
      }
      addSubject(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this._getSubject()
          this.$refs.backInp.focus()
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    clickDel() {
      if (this.id == '') {
        this.$message({
          message: '请选择要删除的数据',
          type: 'error'
        })
        return
      }
      this.$confirm('是否删除此编号的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delSubject({ id: this.id }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this._getSubject()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 网络请求
    _getSubject() {
      getSubject().then((res) => {
        this.subject = res.data.data || []
        this.id = ''
        this.no = ''
        this.name = ''
      })
    }
  }
}
</script>

<style scoped>
.subjectDoc {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}

/* 头部 */
.topbar {
  height: 60px;
  display: flex;
  border-bottom: 2px solid #f4f4f4;
}
.topbar p {
  width: auto;
  line-height: 60px;
  margin-right: 10px;
}

/* 按钮 */
.operation {
  padding: 15px 0;
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
</style>

<style>
.subjectDoc .el-input {
  margin: 15px 16px 0 0;
  width: 160px;
}
.subjectDoc .el-input__inner {
  height: 30px;
}
.subjectDoc .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.subjectDoc .el-button + .el-button {
  margin-left: 0;
}
</style>
